<template>
  <n-config-provider :theme="store.state.theme">
    <n-message-provider>
      <n-layout>
        <n-scrollbar style="max-height: 100vh">
              <transition name="indexFade" mode="out-in">
                <index-home v-if="show"/>
              </transition>
            <!--回到顶部-->
            <n-back-top/>
          </n-scrollbar>
      </n-layout>
      <Navbar/>
    </n-message-provider>
  </n-config-provider>
</template>

<script lang="ts">

import {defineComponent, reactive, toRefs, ref, provide, inject, onMounted, watch} from "vue";
import type {GlobalTheme} from 'naive-ui'
import Navbar from '@/components/common/navbar/index.vue'
import IndexHome from '@/views/home.vue'
import { useStore } from "vuex"

export default defineComponent({
  components: {
    Navbar, IndexHome
  },
  setup() {
    const store = useStore()
    const state = reactive({
      theme: ref<GlobalTheme | null>(null),
      show: false
    })

    const methods = {
      
    }

    onMounted(()=>{
      state.show = true
    })
    
    return {
      ...toRefs(state),
      ...methods,
      store
    }
  }
})

</script>

<style scoped>

/* 渐变设置 */
.indexFade-enter-from, .indexFade-leave-to {
  transform: translateY(700px);
  filter: blur(10px);
  opacity: 0;
}
.indexFade-enter-to, .indexFade-leave-from {
  filter: blur(0px);
  opacity: 1;
}
.indexFade-enter-active {
  transition: all 1.7s ease;
}
.indexFade-leave-active {
  transition: all 3s cubic-bezier(1, 0.6, 0.6, 1);
}
</style>
